<div id="goods-viewer">
<div>
	<div class="goodspic">  
		<div bigpicsrc="<{$product.pic_url}>" class="goods-detail-pic"> 
		<img style=" width:300px;height:300px;" alt="多彩人生多彩裤" src="<{$product.pic_url}>"/>
		</div>
		<table class="picscroll">
			<tr>
				<td width="5%" title="向左" class="scrollarrow toleft" style="visibility: visible;">&nbsp; </td> 
				<td>
				<div class="goods-detail-pic-thumbnail pics">  
					<table>
						<tr>
							<{foreach from=$product.images item=item key=key}>
							<td class="<{if $key==0}>current<{/if}>"> 
								<div class="uparrow"></div> 
								<a imginfo="{small:'<{$item|storager:'s'}>',big:'<{$item|storager:'m'}>'}" target="_blank" href=""> 
								<img width="55" height="55" alt="多彩人生多彩裤" src="<{$item|storager:'s'}>">
								</a>
							</td>
							<{/foreach}>
						</tr>
					</table>
				</div>
				</td>
				<td width="5%" title="向右" class="scrollarrow toright" style="visibility: visible;">&nbsp; </td>
			</tr>
		</table> 
	 </div>
	 <div id="product_info">
		<h3><{$product.name}></h3>
		<ul>
		<{foreach from=$product.props_str item=item key=key}>
		<li><span><{$key}>：</span><em><{$item}></em></li>
		<{/foreach}>
		<li class="price_limit"><span>价格范围：</span><em><{$price_limit.min}> ~ <{$price_limit.max}></em></li>
		</ul>
	 </div>
</div>
<div style="clear:both;"></div>
</div>
		<ul id="product_tabs">
			<li><a class="product_tab" href="#" id="three">商家比价</a></li>
			<li><a class="product_tab" href="#" id="one">产品描述</a></li>
			<li><a class="product_tab" href="#" id="two">详细参数</a></li>
		</ul>
		
		<div id="product_detail">

			<div class="detail">
				<table>
					<tr>
						<th>商品名</th>
						<th>价格</th>
						<th></th>
					</tr>
					<{foreach from=$goods item=item key=key}>
						<tr>
						<td>
							<a href="<{$item.click_url}>" target="_blank"><{$item.goods_name}></a>
						</td>
						<td><{$item.price}></td>
						<td><a href="<{$item.click_url}>" class="orangebtn  allnum " target="_blank"><span>我要购买</span></a></td>
						</tr>
					<{/foreach}>
				</table>
			</div>
			<div class="detail">
				<{$product.desc}>
			</div>
			<div class="detail">
				<table id="detail_params">
					<{foreach from=$product.binds_str item=item key=key}>
					<{if $item}>
					<tr><th><{$key}></th><td><{$item}></td></tr>
					<{/if}>
					<{/foreach}>
				<table>
			</div>
		</div>

	</div>
		<script type="text/javascript">
			var tabs = new MGFX.Tabs('.product_tab','.detail',{
				autoplay: false,
				transitionDuration:50,
				slideInterval:3000,
				hover:true
			});

      window.addEvent('domready',function(){

		  var updatepic=function(vids){
              
              if(!vids)return $$('.goods-detail-pic-thumbnail td[img_id]').each(Element.show);
              vids = vids.split(',');
   
              var pointer = false;
              $$('.goods-detail-pic-thumbnail td[img_id]').each(function(i){
                        
                        if(vids.contains(i.get('img_id'))){
                            i.style.display = '';
                            if(!pointer){
                               i.getElement('a').fireEvent('click',{stop:$empty});
                               pointer = true;
                            }
                        }else{
                            
                            i.style.display = 'none';
                            
                        }
              });
              
          };
         var picThumbnailItems=$$('#goods-viewer .goods-detail-pic-thumbnail td a');              
         if(!picThumbnailItems.length)return;
         var goodsPicPanel = $E('#goods-viewer .goods-detail-pic');
         var goodsDetailPic = $E('#goods-viewer .goods-detail-pic img');
         
         var picscroll=$E('#goods-viewer .picscroll');
         var scrollARROW=picscroll.getElements('.scrollarrow');
         var picsContainer=$E('.pics',picscroll).scrollTo(0,0);
             picsContainer.store('selected',picThumbnailItems[0]);
        
        
         if(picsContainer.getSize().x<picsContainer.getScrollSize().x){
               scrollARROW.setStyle('visibility','visible').addEvent('click',function(){
                     var scrollArrow=this;
                     var to=eval("picsContainer.scrollLeft"+(scrollArrow.hasClass('toleft')?"-":"+")+"picsContainer.offsetWidth");
                     picsContainer.retrieve('fxscroll',new Fx.Scroll(picsContainer,{'link':'cancel'})).start(to);
               });
         };
     
        picThumbnailItems.each(function(item){
             /*预加载 中图*/             
             var _img = new Image();
             _img.src = JSON.decode(item.get('imginfo'))['small'];
             
        });
        
        picThumbnailItems.addEvents({
               
               'click':function(e){
                     e.stop();
                     this.fireEvent('selected');
               },
               'mouseenter':function(){
                    if(this.getParent('td').hasClass('current'))return;
                    var imgInfo = JSON.decode(this.get('imgInfo'));
                    goodsDetailPic.src = imgInfo['big'];
 
               },
               'mouseleave':function(){
                   if(this.getParent('td').hasClass('current'))return;
                   picsContainer.retrieve('selected').fireEvent('selected','noclick');
               
               },
               'selected':function(noclick){

                    var _td = this.getParent('td');
                    if(_td.hasClass('current')&&!noclick)return;
                    picsContainer.retrieve('selected').fireEvent('unselect');
                     _td.addClass('current');
                    var imgInfo = JSON.decode(this.get('imgInfo'));
                    goodsDetailPic.src = imgInfo['big'];
                    goodsPicPanel.set('bigpicsrc',imgInfo['big']);
                    picsContainer.store('selected',this);
               
               },
               'unselect':function(){
                     
                     this.getParent('td').removeClass('current');
               
               },'focus':function(){
                  this.blur();
               }
        });      
              
        picThumbnailItems[0].fireEvent('selected');
               
             
        
        });
         



        </script>